<template>
	<view class="page complaint_page">
		<view class="complaint_form">
			<view class="form_item flex">
				<view class="item_title">
					反馈类型
				</view>
				<view class="item_content flex-end">
					<uni-data-checkbox v-model="form.feedbackType" :localdata="typeList"></uni-data-checkbox>
				</view>
			</view>
			<view class="form_item">
				<view class="item_title">
					反馈类型
				</view>
				<view class="item_content">
					<view class="textarea flex">
						<image class="icon" src="../../static/icon/mine/write_icon.png" mode="scaleToFill"></image>
						<textarea v-model="form.feedback" placeholder="请填写您的反馈内容"></textarea>
					</view>
				</view>
			</view>
			<view class="form_item">
				<view class="item_title">
					附件
				</view>
				<view class="item_content">
					<view class="image">
						<uni-file-picker v-model="form.attachment" :image-styles="imageStyles" fileMediatype="image" mode="grid"
							@select="select">
							<view class="file_text">
								<uni-icons type="plusempty" size="20"></uni-icons>
								<view>
									上传图片
								</view>
							</view>
						</uni-file-picker>
					</view>
				</view>
			</view>
			<view class="form_item flex">
				<view class="item_title">
					反馈类型
				</view>
				<view class="item_content flex-end">
					<view class="text">
						<input type="text" v-model="form.mobile" placeholder="请输入您的联系方式" />
					</view>
				</view>
			</view>
			<view class="btns" @click="submit">
				保存
			</view>
		</view>
	</view>
</template>

<script>
	import {
		insertComplainProposal
	} from '@/api/mine.js'
	import {
		fileUpload
	} from '@/api/common.js'
	export default {
		data() {
			return {
				type: 0,
				imageStyles: {
					width: 70,
					height: 70,
				},
				form: {
					feedbackType: 2,
					feedback: '',
					attachment: [],
					mobile: '',
				},
				imageValue: [],
				typeList: [{
						text: '投诉',
						value: 0
					},
					{
						text: '建议',
						value: 1
					}
				]
			}
		},
		methods: {
			submit() {
				insertComplainProposal({
					no: '',
					feedbackPerson: '',
					feedbackIdentity: '',
					...this.form
				}).then(res => {
					console.log(res)
				})
			},
			// 获取上传状态
			select(e) {
				let image = e.tempFilePaths[0]
				fileUpload({
					filePath: image
				}).then(res => {
					console.log(res)
				}).catch(err => {
					console.log(res)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.complaint_page {
		padding: 0;
		padding-top: 30rpx;

		.complaint_form {
			padding: 30rpx;
			background-color: #FFF;
			border-radius: 20rpx 20rpx 0 0;

			.btns {
				padding: 40rpx 0;
				margin: 200rpx 20rpx 90rpx 20rpx;
			}

			.form_item {
				padding: 15rpx 0;

				&.flex {
					display: flex;
					align-items: center;
				}

				.item_title {
					flex: 0 0 160rpx;
					max-width: 140rpx;
					font-weight: bold;
					font-size: 30rpx;
				}

				.item_content {
					flex: auto;
					font-size: 22rpx;
					color: #999;


					&.flex-end {
						display: flex;
						align-items: center;
						justify-content: flex-end;
					}

					.image {
						margin: 30rpx 0;

						.file_text {
							display: flex;
							flex-direction: column;
							align-items: center;
							font-size: 18rpx;
						}
					}

					.text {
						text-align: right;
					}

					.textarea {
						display: flex;
						align-items: flex-start;
						background-color: #F9F9F9;
						margin: 20rpx 0;
						padding: 20rpx;
						font-size: 22rpx;
						border-radius: 10rpx;

						.icon {
							width: 24rpx;
							height: 24rpx;
							margin-right: 20rpx;
						}
					}
				}
			}
		}
	}
</style>